<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <%@ include file="/WEB-INF/views-jsp/include/taglib/taglib.jsp" %>
        <%@ include file="/WEB-INF/views-jsp/include/script/script.jsp" %>
        <%@ include file="/WEB-INF/views-jsp/include/link/link.jsp" %>
        <link rel="stylesheet" href="${path}/html/js/js-resource/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="${path}/html/js/js-resource/calendar/css/calendar.css">
        <link rel="stylesheet" href="${path}/html/js/js-jsp/wo/attend/css/attendanceStatistics.css?v=<%out.print(Math.random());%>">
        <link rel="stylesheet" type="text/css" href="${path}/html/css/jquery.loadmask.css" />
        <script type="text/javascript" src="${path}/html/js/js-resource/underscore/underscore-min.js"></script>
        <script type="text/javascript" src="${path}/html/js/js-resource/bootstrap/js/bootstrap.js"></script>
        <script type="text/javascript" src="${path}/html/js/js-resource/calendar/js/calendar.js?v=<%out.print(Math.random());%>"></script>
        <script type="text/javascript" src="${path}/html/js/js-jsp/wo/attend/js/attendanceDetail.js?v=<%out.print(Math.random());%>"></script>
        <script type="text/javascript" src="${path}/html/js/js-resource/jstimezonedetect/jstz.min.js"></script>
        <script type="text/javascript" src="${path}/html/js/js-resource/calendar/js/language/zh-CN.js"></script>
        <script language="javascript" src="${path}/html/js/js-jsp/jquery.loadmask.js"></script>
        <script type="text/javascript">
            $(function(){
                var timeDate = [];
                <c:forEach items="${timeList}" var="attendTime">
                var obj = {};
                obj["id"] = '${attendTime.id}';
                obj["title"] = '${attendTime.title}';
                obj["class"] = '${attendTime.classTemp}';
                obj["start"] = '${attendTime.start}';
                obj["end"] = '${attendTime.end}';
                timeDate.push(obj);
                </c:forEach>
                var calendar = $('#calendar').calendar({
                    tmpl_path: '../html/js/js-resource/calendar/tmpls/',
                    language: 'zh-CN',
                    events_source: timeDate
                });
                $('#calendar').data("calendar", calendar);
            });
        </script>
    </head>
    <body>
        <div class="forMask">
        </div>
        <div class="place">
            <span>当前位置：</span>
            <ul class="placeul">
                <li><a id="attend" style="text-decoration:none" href="${path}/attend/index.do?prId=${personInfo.projectId}">人员管理</a></li>
                <li ><a style="color: black;text-decoration:none">考勤详情</a></li>
            </ul>
        </div>
        <input type="hidden" id="idCard_" style="clear: both" value="${personInfo.idCard}">
        <input type="hidden" id="projectId_" value="${personInfo.projectId}">
        <div id="cc"  class="easyui-layout" style="width:100%;height:100%;">
            <div data-options="region:'north'" style="height:35px">
            </div>
            <div id="eastPanel_" data-options="region:'east',collapsed:false,title:'补卡详情'" style="width:200px;">
                <div>
                    <p style="font-size: 15px">
                        姓名：${personInfo.name}
                    </p>
                    <p style="font-size: 15px">
                        身份证号：${personInfo.idCard}
                    </p>
                    <p style="font-size: 15px" id="cardRepairDate_">
                        补卡日期：
                    </p>
                    <p style="font-size: 15px" id="repairTime_">
                        补卡时间：
                    </p>
                    <p style="font-size: 15px" id="repairReason_">
                        补卡原因：
                    </p>
                    <p style="font-size: 15px" id="repairPerson_">
                        补卡人：
                    </p>
                    <p style="font-size: 15px" id="entryDate_">
                        补卡录入时间：
                    </p>
                </div>
            </div>
            <div data-options="region:'center'">
                <div class="attendLeft">
                    <div class="personHead">
                        <img src="${headImg}" onerror="this.onerror='';src='${path}/html/images/defaulPhoto/defaulPhoto.jpg'"/>
                    </div>
                    <div class="personName">
                        <p>${personInfo.name}</p>
                    </div>
                    <div class="attendLeft-inBottom">
                        <p>
                            <span class="personlabel">
                                身份证号：
                            </span>
                            <span class="personInfo">
                                ${personInfo.idCard}
                            </span>
                        </p>
                        <p>
                            <span class="personlabel">
                                加入项目时间：
                            </span>
                            <span class="personInfo">
                                ${personInfo.joinProjectTime}
                            </span>
                        </p>
                        <p>
                            <span class="personlabel">
                                在职状态：
                            </span>
                            <span class="personInfo">
                                <c:if test="${personInfo.deleted == 0}">
                                    在职
                                </c:if>
                                <c:if test="${personInfo.deleted == 1}">
                                    离职
                                </c:if>
                            </span>
                        </p>
                    </div>
                </div>
                <div class="attendRight">
                    <div class="attendRight-top">
                        <p>
                            <span class="arrowLeft">
                                <img src="${path}/html/images/leftArrow.png" onclick="arrowClick('left')"/>
                            </span>
                            <span class="currentMonth" id="month_">
                                ${currentMonth}
                            </span>
                            <span class="arrowRight">
                                <img src="${path}/html/images/rightArrow.png" onclick="arrowClick('right')"/>
                            </span>
                        </p>
                    </div>
                    <div class="attendRight-middle">
                        <div class="attendRight-middle-top">
                            <div>
                                <time class="icon">
                                    <em>小时</em>
                                    <strong>累计出勤工时</strong>
                                    <span id="totalAttendLength_">${totalAttendLength}</span>
                                </time>
                            </div>
                            <div>
                                <time class="icon">
                                    <em>天</em>
                                    <strong>出勤天数</strong>
                                    <span id="workerDays_">${workerDays}</span>
                                </time>
                            </div>
                            <div>
                                <time class="icon">
                                    <em>天</em>
                                    <strong class="repairDays">补卡天数</strong>
                                    <span id="supplementCard_">${supplementCard}</span>
                                </time>
                            </div>
                        </div>
                        <div class="attendRight-middle-botm">
                            <div>
                                <p class="onTheJob">●</p>
                            </div>
                            <div>
                                <p style="margin-left:10px;margin-top:15px">出勤</p>
                            </div>
                            <div>
                                <p class="quitTheJob">●</p>
                            </div>
                            <div>
                                <p style="margin-left:10px;margin-top:15px">补卡</p>
                            </div>
                        </div>
                    </div>
                    <div class="attendRight-top">
                        <div id="calendar"></div>
                    </div>
                </div>
                <div border="false" style="padding: 1px;margin-top:15px">
                    <iframe id="attendDetail-dataList" frameborder="0" scrolling="yes" style="width:100%; height:100%; overflow: hidden;fit:true"></iframe>
                </div>
            </div>
        </div>
    </body>
</html>
